<template>
  <div class="login-container">
    <!-- 背景装饰元素 -->
    <div class="decorative-bg">
      <div class="bubble bubble-1"></div>
      <div class="bubble bubble-2"></div>
      <div class="bubble bubble-3"></div>
    </div>

    <!-- 登录卡片 -->
    <el-card class="login-card">
      <div class="card-header">
        <h1 class="system-title">
          <img src="../assets/tea.png" alt="奶茶图标" class="logo-image" />
          后台管理系统
        </h1>
        <p class="welcome-text">Welcome Back</p>
      </div>

      <el-form
          :model="fromData"
          label-width="0px"
          :rules="rules"
          ref="ruleForm"
          class="login-form"
      >
        <el-form-item label="" prop="username">
          <el-input
              prefix-icon="el-icon-user"
              placeholder="请输入账号"
              v-model="fromData.username"
              clearable
              class="custom-input"
          ></el-input>
        </el-form-item>

        <el-form-item label="" prop="password">
          <el-input
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
              show-password
              v-model="fromData.password"
              clearable
              class="custom-input"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
              @click="submitForm('ruleForm')"
              type="primary"
              class="login-btn"
          >
            登 录
          </el-button>

          <div class="action-links">
            <router-link
                :to="{path:'register'}"
                class="register-link"
            >
              <el-button type="text">没有账号？立即注册</el-button>
            </router-link>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { AddRoutes } from "@/router";

export default {
  data() {
    return {
      fromData: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.request.post("/sysUser/login", this.fromData).then(res => {
            if (res.code === 200) {
              this.$message({
                message: "登录成功，正在跳转",
                type: "success",
                duration: 1500
              });

              const userInfo = res.data
              localStorage.setItem("systemUser", JSON.stringify(userInfo));
              localStorage.setItem("systemRoleMenu", JSON.stringify(userInfo.roleMenu));

              AddRoutes();

              setTimeout(() => {
                const redirectPath = res.data.roleType === "USER"
                    ? "/front"
                    : "/";
                this.$router.push(redirectPath);
              }, 1800);
            }
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
  position: relative;
  overflow: hidden;
}

.decorative-bg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.bubble {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: float 20s infinite linear;
}

.bubble-1 {
  width: 200px;
  height: 200px;
  top: 20%;
  left: 10%;
}

.bubble-2 {
  width: 150px;
  height: 150px;
  top: 60%;
  right: 15%;
  animation-delay: -5s;
}

.bubble-3 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 30%;
  animation-delay: -10s;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-20px) rotate(10deg); }
  50% { transform: translateY(20px) rotate(-10deg); }
  75% { transform: translateY(-15px) rotate(5deg); }
}

.login-card {
  width: 400px;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.login-card:hover {
  transform: translateY(-5px);
}

.card-header {
  text-align: center;
  padding: 30px 0 20px;
}

.system-title {
  color: #2d3436;
  font-size: 28px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.logo-image {
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}

.welcome-text {
  color: #636e72;
  font-size: 14px;
  margin: 8px 0 0;
}

.login-form {
  padding: 0 30px 20px;
}

.custom-input {
  margin: 15px 0;
}

.custom-input >>> .el-input__inner {
  height: 45px;
  border-radius: 25px;
  padding-left: 40px;
  transition: all 0.3s ease;
}

.custom-input >>> .el-input__prefix {
  left: 10px;
  display: flex;
  align-items: center;
}

.login-btn {
  width: 100%;
  height: 45px;
  border-radius: 25px;
  background: linear-gradient(45deg, #ff6b6b, #ff9a44);
  border: none;
  font-size: 16px;
  letter-spacing: 2px;
  transition: all 0.3s ease;
}

.login-btn:hover {
  background: linear-gradient(45deg, #ff9a44, #ff6b6b);
  box-shadow: 0 5px 15px rgba(255,107,107,0.4);
  transform: translateY(-2px);
}

.action-links {
  margin-top: 15px;
  text-align: center;
}

.register-link >>> .el-button {
  color: #636e72;
  font-size: 13px;
  transition: color 0.3s ease;
}

.register-link >>> .el-button:hover {
  color: #ff6b6b;
  transform: none;
}

@media (max-width: 480px) {
  .login-card {
    width: 90%;
    margin: 0 5%;
  }

  .system-title {
    font-size: 24px;
  }
}
</style>